<template>
	<view class="page">
		<!-- 内容区 -->
		<view class="padding-40 borderRadius-40 content-section">
			<view class="flex items-end">
				<image :src="memoryList.image_url" mode="" style="width: 166rpx; height: 186rpx;"></image>
				<view class="marginLeft-30 color-51D580">
					<view class="fontSize-48 weight-700">
						{{memoryList.title1}}
					</view>
					<view class="fontSize-32 marginTop-15 weight-700">
						{{memoryList.title2}}
					</view>
				</view>

			</view>
			<view class="fontSize-28 color-666 marginBottom-20 marginTop-60 lineheight">
				{{memoryList.title3}}
			</view>
			<view class="fontSize-28 color-666 marginBottom-20 lineheight">
				{{memoryList.title4}}
			</view>
			<view class="fontSize-28 color-666 marginBottom-20 lineheight">
				{{memoryList.title5}}
			</view>
			<view class="fontSize-28 color-666 marginBottom-20 lineheight">
				{{memoryList.title6}}
			</view>
			<view class="fontSize-30 marginTop-60 color-333 weight-700 lineheight">
				{{memoryList.title7}}
			</view>
			<view class="fontSize-26 color-999 marginTop-20 lineheight">
				{{memoryList.title8}}
			</view>
		</view>
		<!-- 按钮区 -->
		<view class="btn-section">
			<view
				class="borderRadius-92 colorBj-51D580 color-white fontSize-32 flex flex-center items-center btn marginTop-38"
				@click="next">
				开始测试吧！
			</view>
			<view class="fontSize-32 color-999 btn text-center" @click="backShow = true">
				放弃测试，使用通用方案
			</view>
		</view>
		<up-popup :show="backShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					温馨提示
				</view>
				<view class="text-center marginTop-100 fontSize-32 color-333">
					通过记忆力测试才能制定出适合你的学习方案哟，使用适合你的方案，学习才能事半功倍
				</view>

				<view class="flex space-between items-center marginTop-50">
					<view class="btn" @click="back">
						使用通用方案
					</view>
					<view class="btn" @click="next" style="background: #51D580;">
						去测试
					</view>
				</view>
			</view>
		</up-popup>

	</view>
</template>

<script setup>
	import {
		inject,
		ref
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app'
	const MemoryWordsIndexApi = inject('MemoryWordsIndex')
	const outMemoryWordMethodApi = inject('outMemoryWordMethod')

	const memoryList = ref([])
	const backShow = ref(false)

	const notseen_num = ref(0)
	onLoad(() => {
		MemoryWordsIndexApi().then(res => {
			console.log(res)
			memoryList.value = res[0]
			notseen_num.value = res[0].notseen_num
			if (res.status == 201) {
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}
		})
	})
	const next = () => {
		if (notseen_num.value == 10) {
			uni.redirectTo({
				url: '/pages/index/memoryMaxStepOneTotal'
			})
		} else {
			uni.redirectTo({
				url: '/pages/index/memoryMaxStepOne'
			})
		}

	}
	const back = () => {
		outMemoryWordMethodApi({
			type: '1'
		}).then(res => {
			uni.redirectTo({
				url: '/pagesA/memory/memoryGuide'
			})
		})
	}
</script>

<style lang="scss">
	.page {
		padding: 30rpx;
		box-sizing: border-box;
	}

	.btn {
		width: 702rpx;
		height: 104rpx;
		line-height: 104rpx;
	}

	.content-section {
		background-color: rgba(81, 213, 128, 0.08);
		padding-bottom: 100rpx;

	}

	.lineheight {
		line-height: 40rpx;
	}

	.btn-section {
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		padding: 0 50rpx;
		box-sizing: border-box;

		.btn {
			width: 252rpx;
			height: 92rpx;
			background: #CCCCCC;
			border-radius: 74rpx;
			text-align: center;
			line-height: 93rpx;
			color: #fff;
		}

	}

	@media (max-height: 700px) {
		.btn-section {

			bottom: 0;

		}

		.content-section {
			padding-bottom: 0;
			height: 850rpx;
			overflow-y: auto;

		}
	}
</style>